<template>
  <div>
    <h3 id="orderContentH3">售票统计</h3>
    <div id="incomeEchart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import utils from "../../js/index";

export default {
  watch: {
    selectData1(a, b) {
      this.selectData1 = a;
      this.carried();
    },
    selectData2(a, b) {
      this.selectData2 = a;
      this.carried();
    },
    dateType(a, b) {
      this.dateType = a;
    },
    deep: true,
  },
  props: ["selectData1", "selectData2", "dateType"],
  data() {
    return {};
  },
  mounted() {
    // if (this.echart2.length == 0) {
    //   return;
    // }
    // this.carried();
  },
  methods: {
    carried() {
      var echart2 = echarts.init(document.querySelector("#incomeEchart"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.option2(), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    option2() {
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: ["售票量", "退票量", "售票金额"],
        },
        xAxis: [
          {
            type: "category",
            data: this.selectData1.map((e) => {
              return this.dateType == "天"
                ? utils.utils.NewDateYear(e.TIME)
                : utils.utils.NewDateYear(e.dotime);
            }),
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "售票量",
            min: 0,
            max: function (value) {
              return value.max + 10000;
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "售票金额",
            axisLabel: {
              formatter: "{value} 元",
            },
          },
        ],
        series: [
          {
            name: "售票量",
            type: "bar",
            barWidth: 30,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#2980B9", // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#6DD5FA", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#6DD5FA", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: this.selectData1.map((e) => {
              return e.zzs;
            }),
          },
          {
            name: "退票量",
            type: "bar",
            barWidth: 30,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#6A5ACD", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#6A5ACD", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1E90FF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: this.selectData2.map((e) => {
              return e.zzs;
            }),
          },
          {
            name: "售票金额",
            type: "line",
            yAxisIndex: 1,
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#1E90FF", // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "#1E90FF", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1E90FF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: this.selectData1.map((e) => {
              return e.zje;
            }),
          },
        ],
      };
      return option;
    },
  },
};
</script>
<style scoped>
#incomeEchart {
  width: 90%;
  height: 350px;
}
#orderContentH3 {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px;
}
</style>